<template>
	<view class="container">
		<uni-swipe-action>
			<uni-section class="comment-section" title="评论" v-for="(comment, index) in comments" :key="index">
				<next-swipe-action :btnGroup="btnGroup" :index="index" @btnClick="deletebut(index)">
					<uni-card :title="comment.username" :sub-title="`评论时间: ${formatDate(comment.timestamp)}`"
						:extra="'身份: 用户'" :thumb="comment.avatar || '/static/default-avatar.png'"
						:note="comment.content">
						<text class="comment-content">{{ comment.content }}</text>
					</uni-card>
				</next-swipe-action>
			</uni-section>
		</uni-swipe-action>
		<view class="publish-comment-button-container">
			<button @click="showCommentInput">发布评论</button>
		</view>
		<view v-if="showCommentForm" class="comment-form">
			<textarea v-model="newCommentContent" placeholder="写下你的评论..." />
			<button @click="submitComment">提交</button>
			<button @click="cancelComment">取消</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				comments: [{
						avatar: '',
						content: '这是一条精彩的评论内容。111',
						username: '用户1',
						timestamp: new Date().getTime()
					},
					{
						avatar: '',
						content: '我很喜欢这篇文章，期待更多更新21321321。',
						username: '用户1',
						timestamp: new Date().getTime()
					},
				],
				btnGroup: [{
					name: '删除',
					action: 'del',
					style: {
						bgColor: '#ff4d4f'
					}
				}, ],
				showCommentForm: false,
				newCommentContent: '',
				deleteIndex: null,
			};
		},
		methods: {
			onDeleteComment(index) {
				this.deleteIndex = index;
			},
			confirmDelete() {
				if (this.deleteIndex !== null) {
					this.comments.splice(this.deleteIndex, 1);
				}
				this.deleteIndex = null; // 删除后重置索引
			},
			showCommentInput() {
				this.showCommentForm = true;
			},
			submitComment() {
				if (this.newCommentContent.trim()) {
					const currentTime = new Date().getTime(); // 获取当前时间戳
					console.log('提交评论:', this.newCommentContent);
					this.comments.unshift({
						username: '用户',
						avatar: '',
						content: this.newCommentContent,
						timestamp: currentTime, // 添加当前时间戳到新评论对象
					});
					this.newCommentContent = '';
					this.showCommentForm = false;
				} else {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					});
				}
			},
			// 添加一个方法来格式化时间戳为日期字符串
			formatDate(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			},
			cancelComment() {
				this.newCommentContent = '';
				this.showCommentForm = false;
			},
			deletebut(index) {
				this.comments.splice('index', 1)
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
			}
		},
	};
</script>


<style>
/* 提升组件间距 */
.comment-section {
  margin-bottom: 16px;
}

/* 优化按钮样式 */
button {
  transition: background-color 0.3s ease;
}
button:hover {
  opacity: 0.8;
}
button:active {
  transform: scale(0.98);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 评论内容优化 */
.comment-content {
  font-size: 14px;
  line-height: 1.5;
}

/* 时间戳样式 */
.comment-time {
  font-size: 12px;
  color: #999;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .container {
    padding: 8px;
  }
  .comment-section {
    margin-bottom: 8px;
  }
}
</style>